<template>
  <div class="app-container home">
    <div class="bg_fff p_10 listbody">
      <el-tabs
        v-model="activeName"
        class="comm_tab"
        @tab-click="handleClick"
      >
        <el-tab-pane label="奖品核销记录" name="first">
          <active-list :type='1' />
        </el-tab-pane>
        <el-tab-pane label="订单核销记录" name="second">
          <order-list :type='2' />
        </el-tab-pane>
        <el-tab-pane label="红包记录" name="third">
          <packet-list :type='3' />
        </el-tab-pane>
        <el-tab-pane label="礼品记录" name="fourth">
          <gift-list :type='4' />
        </el-tab-pane>
      </el-tabs>
      <el-button plain type="primary" class="gohexiao" size="mini" @click="handleOpen">前往核销</el-button>
    </div>

    <el-dialog
      title="核销奖券"
      :visible.sync="open"
      width="900px"
      class="dialogheaderbg"
      :before-close="handleClose"
    >
      <hexiao-comp @close="handleClose" />
    </el-dialog>

  </div>
</template>

<script>
import ActiveList from "./ActiveList.vue";
import OrderList from "./OrderList.vue";
import PacketList from './PacketList.vue'
import GiftList from './GiftList.vue'
import HexiaoComp from './components/HexiaoComp.vue'

export default {
  data() {
    return {
      activeName: "first",
      open:false
    };
  },
  components: {
    ActiveList,
    OrderList,
    PacketList,
    GiftList,
    HexiaoComp
  },
  methods:{
    handleClick(){

    },

    handleOpen(){
      this.open =  true
    },

    handleClose(){
      this.open = false
    }
  }
};
</script>

<style lang="scss" scoped>
.listbody {
  width: 100%;
  min-height: calc(100vh - 135px);
  border-radius: 6px;
  position: relative;
}
.gohexiao{
  position: absolute;
  right: 15px;
  top: 15px;
}
</style>